<template>
  <view class="tips">
    <image class="img" src="@/static/images/alert_icon.png" mode="widthFix"></image>
    <view> 电子合同生成后，支持在签署中状态通过【修改合同】变更电子合同的内容，已完成签署和已作废后不支持变更合同内容。 </view>
  </view>
  <view class="detail-container" :style="'height: calc(100vh - ' + barHeight * 2 + 'rpx)'">
    <!-- <scroll-view scroll-y :scroll-with-animation="true" :enable-back-to-top="true" refresher-background="#f7f8fa"> -->
    <view>
      <ve-card
        :title="'合同编号：' + (record.contractNo || '-')"
        :sub-title="record.contractStatusName"
        :type="
          record.contractStatus == 1 || record.contractStatus == -2
            ? 'gray'
            : record.contractStatus == 2
            ? 'blue'
            : record.contractStatus == 3 || record.contractStatus == 10
            ? 'green'
            : record.contractStatus == 4 ||
              record.contractStatus == 5 ||
              record.contractStatus == 6 ||
              record.contractStatus == 7 ||
              record.contractStatus == 8 ||
              record.contractStatus == 11 ||
              record.contractStatus == -1
            ? 'pink'
            : record.contractStatus == 9
            ? 'purple'
            : 'gray'
        "
        v-for="(record, index) in dataSource"
        :key="record.contractStatus"
      >
        <ve-cell label="合同类型">{{ record.contractTypeName || '-' }}</ve-cell>
        <ve-cell label="合同模板名称">{{ record.templateName || '-' }}</ve-cell>
        <ve-cell label="归属门店">{{ record.siteName || '-' }}</ve-cell>

        <block v-if="record.contractStatus == 2 || record.contractStatus == 3 || record.contractStatus == 8">
          <ve-cell label="承租方" class="tag-person">
            <view class="fs30 fw400 c1">{{ record.leaseType == 1 ? record.lesseeCompanyName || '-' : record.lesseeName || '-' }}</view>
            <view class="person-flex-copy" v-if="record.lesseeSignStatusName">
              <view :class="['tag', record.lesseeSignStatus == 1 ? 'text-no' : 'text-yes']">{{ record.lesseeSignStatusName || '-' }}</view>
            </view>
            <view class="copys" @click="copylink(record, '已将链接复制到剪切板')" v-if="hasPermission('contractCopySigningLink')">
              <image class="image-icon" src="@/static/icons/link.png" mode="widthFix"></image>
              <view class="copy-text">复制合同链接</view>
            </view>
          </ve-cell>

          <ve-cell label="出租方" class="tag-person">
            <view class="fs30 fw400 c1">{{ record.tenantName || '-' }}</view>
            <view class="person-flex-copy" v-if="record.hireSignStatusName">
              <view :class="['tag', record.hireSignStatus == 1 ? 'text-no' : 'text-yes']">{{ record.hireSignStatusName || '-' }}</view>
            </view>
          </ve-cell>
        </block>

        <ve-cell>
          <template #label>
            <view>签署短信条数</view>
          </template>
          <ve-tooltip placement="top">
            <template #content>
              <view>发送签署链接的短信会单独收费</view>
            </template>
            <ve-icon name="help" style="margin-top: 6rpx" size="32" />
          </ve-tooltip>
          {{ record.msgNum != null ? record.msgNum : '-' }} 条
        </ve-cell>
        <ve-cell label="发起人">{{ record.startPersonName || '-' }}</ve-cell>
        <ve-cell label="发起签署时间">{{ record.startTime || '-' }}</ve-cell>
        <ve-cell label="发起节点">{{ record.startNode || '-' }}</ve-cell>
        <ve-operate-list :operates="operates" :record="record" />
        <ve-popup :model-value="popupValue" @close="close" mode="bottom" :maskClose="true">
          <view class="add-popup">
            <view class="title">请选择</view>
            <ve-button class="button" size="default" @click="toPreview(currenRecord)" style="margin-bottom: 32rpx; background: #d5e3ff"
              >下载PDF文件</ve-button
            >
            <ve-button class="button" size="default" @click="toDownload(currenRecord)">下载JPG图片(合成长图)</ve-button>
          </view>
        </ve-popup>
      </ve-card>
      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="dataSource.length == 0"></ve-empty>
    </view>
    <!-- </scroll-view> -->
    <ve-bottom-box v-if="handContractPermission">
      <ve-button type="primary" @click="showContract" style="width: 100%">手动生成电子合同</ve-button>
    </ve-bottom-box>
    <!-- 复制弹窗 -->
    <copyModal ref="copymodals" />
    <!-- 选择车牌号 -->
    <change-license-modal ref="changeLicenseModalRef" :orderCarInfoList="orderCarInfoList" @ok="changeLicenseOk" />
    <!-- 修改承租人信息 -->
    <shortEditLesseeMemberModal v-if="orderType == 2" ref="editLesseeMemberModalRef" />
    <longEditLesseeMemberModal v-else ref="editLesseeMemberModalRef" />
    <!-- 修改已选承租人信息 -->
    <!-- notfetch 不请求member接口 -->
    <EditCurrentMemberModal
      :orderType="orderType == 2 ? 'sOrder' : 'lOrder'"
      mode="notFetch"
      ref="editCurrentMemberModalRef"
      @changeMember="changeMemberFn"
      isCommonContract
    />
    <!-- 5.9.2.2 生成电子合同判断逻辑优化 -->
    <ve-modal
      title="提示"
      v-model="errorModalObject.visible"
      :okText="errorModalObject.okText"
      :cancelText="errorModalObject.cancelText"
      :showCancel="errorModalObject.showCancel"
      @confirm="errorModalObject.onConfirm"
      @cancel="errorModalObject.onCancel"
      :okLoading="errorModalObject.loading"
    >
      <view class="errorModal" v-html="errorModalObject.html" />
    </ve-modal>
  </view>
</template>

<script setup>
  import { usePermission } from '@/hooks/usePermission'
  import { reactive, ref } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import { appConfig } from '@/config/index.js'
  import copyModal from '@/pages/order/components/customer/copy-modal.vue'
  import changeLicenseModal from '@/pages/order/components/change-license-modal.vue'
  import longEditLesseeMemberModal from '@/pages/order/long-order/components/order-item/modals/edit-lessee-member-modal.vue'
  import shortEditLesseeMemberModal from '@/pages/order/short-order/components/order-item/modals/edit-lessee-member-modal.vue'
  import EditCurrentMemberModal from '@/pages/order/components/customer/edit-current-member-modal.vue'
  import { shortorderdetail } from '@/api/dict/detail'
  import { getOrdrDetailsAPI, checkContractData, carReplaceListAPI, updateReplaceList } from '@/api/order/lOrder'
  import { clientInfoDetail } from '@/api/market/member'
  import { serializeUrlParams } from '@/utils'
  import {
    downloadContractFileAPI,
    nullifyAPI,
    revokeAPI,
    getLesseeSignUrlAPI,
    dzcontractAPI,
    czcontractAPI,
    deleteContractFileAPI,
    sendLesseeSignMsgAPI,
  } from '@/api/order/contract'
  import { userStore } from '@/stores'
  console.log(appConfig.env)
  console.log(getApp().globalData.requestUrl)
  const barHeight = ref(0)
  const copymodals = ref(null)
  const orderCode = ref()
  const dataSource = ref([])
  const popupValue = ref(false)
  const isDownload = ref(false)
  const props = defineProps({
    orderId: [String, Number],
    orderType: {
      type: String,
      default: '', //  2短租 3长租
    },
    // 合同付费类型
    contractPayType: {
      type: Number,
      default: 0,
    },
    permissionPrefix: String,
  })

  // 是否有对应按钮权限
  const hasPermission = (permissionSubfix) => {
    const permission = props.permissionPrefix + '.' + permissionSubfix
    return usePermission(permission)
  }

  // 完整权限字符串
  const getPermission = (permissionSubfix) => {
    return props.permissionPrefix + '.' + permissionSubfix
  }

  const emits = defineEmits(['ok'])
  const handContractPermission = ref(hasPermission('handContract'))
  const userInfoStore = userStore()
  // 查询参数
  const queryParam = ref({})
  const loadData = () => {
    if (props.orderType == 2) {
      queryParam.value.payType = props.contractPayType
      dzcontractAPI(queryParam.value).then((res) => {
        dataSource.value = res.result
      })
    } else {
      queryParam.value.contractAttribute = props.contractPayType || 3
      czcontractAPI(queryParam.value).then((res) => {
        dataSource.value = res.result
      })
    }
  }
  const resetRefresh = () => {
    loadData()
    emits('ok')
  }
  // 订单信息
  const orderInfo = ref({})
  // 初始化
  const init = (callback) => {
    if (props.orderId) {
      if (props.orderType == 2) {
        shortorderdetail({ id: props.orderId }).then((res) => {
          orderCode.value = res.result.orderInfo.orderCode
          queryParam.value = {
            orderId: props.orderId,
            orderCode: orderCode.value,
            orderType: 1,
            payType: 0, //短租合同付款类型
          }
          if (orderCode.value) {
            loadData()
          }
          orderInfo.value = res.result.orderInfo

          callback && callback()
        })
      } else {
        queryParam.value = {
          orderId: props.orderId,
          orderType: 2,
          pageSize: 10,
          contractAttribute: 3, //长租合同付款类型
        }
        loadData()
        getOrdrDetailsAPI({ id: props.orderId }).then((res) => {
          orderInfo.value = res.result.orderInfo

          callback && callback()
        })
      }
    }
  }
  // 触发新增电子合同
  const handleOpenNewContract = () => {
    // 是否有新增电子合同的按钮权限
    let tempPermission = handContractPermission.value
    // 有按钮权限
    if (tempPermission) {
      const triggerNewContract = uni.getStorageSync('triggerNewContract')
      if (triggerNewContract === 0) {
        uni.removeStorageSync('triggerNewContract')
        // 触发新增电子合同
        showContract({})
      }
    }
  }
  onShow(() => {
    console.log('短租&长租：', props.orderType)
    init(() => {
      handleOpenNewContract()
    })
    // 获取滑动高度
    uni.getSystemInfo({
      success: function (res) {
        console.log(res.statusBarHeight)
        barHeight.value = res.statusBarHeight
      },
    })
  })
  // 复制链接
  const copylink = (record, tlt) => {
    // 获取到链接后 复制
    getLesseeSignUrlAPI({ id: record.id }).then((res) => {
      uni.setClipboardData({
        data: res.result,
        success: function () {
          uni.showToast({
            title: tlt,
            icon: 'none',
          })
        },
      })
    })
  }

  // 验证手机号码格式是否正确
  const isMobile = (val) => {
    return /^[0-9]{11}$/.test(val)
  }
  // 修改车牌号判断订单是否有换车操作弹框
  const changeLicenseModalRef = ref()
  // 换车记录列表
  const orderCarInfoList = ref([])
  const editCarLicenseNo = (record) => {
    let fn = props.orderType == 2 ? updateReplaceList : carReplaceListAPI
    fn({ id: record.id }).then((res) => {
      let result = res.result
      // 是否为换车
      if (result?.length > 1) {
        orderCarInfoList.value = result.map((item) => {
          return {
            ...item,
            label: item.licenseNo,
            value: item.id,
          }
        })
        changeLicenseModalRef.value.open(record)
      } else {
        changeLicenseOk(record)
      }
    })
  }
  // 跳转选择车牌号页面
  const changeLicenseOk = (record) => {
    let orderInfo = {
      id: record.id,
      siteId: record.siteId,
      siteName: record.siteName,
      startTime: record.startTime || record.expectedUseCarTime,
      endTime: record.endTime || record.expectedReturnCarTime,
      rentDays: record.rentDays || record.leaseNumberStr,
      carSource: record.carSource,
      carSourceName: record.carSourceName,
      orderSourceName: record.orderSourceName,
      oldOrderCarId: record.oldOrderCarId,
      isEditLicenseNo: true, // 修改车牌号标识
      orderStatus: record.orderStatus || record.status,
      // 订单获取方式
      orderAcquisitionTypeName: record.orderAcquisitionTypeName,
    }
    let paramStr = serializeUrlParams({
      mode: 'platoon',
      type: props.orderType == 2 ? 'short-order' : 'long-order',
      data_json: JSON.stringify(orderInfo),
      orderInfo_json: JSON.stringify(orderInfo),
    })
    uni.navigateTo({
      url: `/pages/asset/stock/car-stock/selector?${paramStr}`,
    })
  }
  // 排车 & 改排
  const platoonCarFn = (record) => {
    if ([10, 100].includes(record.orderStatus || record.status)) {
      // 跳转选择车牌号页面
      let orderInfo = {
        id: record.id,
        // 当前选中的车辆 id
        platoonCarId: record.carId,
        carId: record.carId,
        siteId: record.siteId,
        siteName: record.siteName,
        modelId: record.carModelId || record.modelId,
        modelName: record.carModelName || record.modelName,
        startTime: record.startTime || record.expectedUseCarTime,
        endTime: record.endTime || record.expectedReturnCarTime,
        rentDays: record.rentDays || record.leaseNumberStr,
        carSource: record.carSource,
        carSourceName: record.carSourceName,
        orderSourceName: record.orderSourceName,
        // 订单获取方式
        orderAcquisitionTypeName: record.orderAcquisitionTypeName,
      }
      let paramStr = serializeUrlParams({
        mode: 'platoon',
        type: props.orderType == 2 ? 'short-order' : 'long-order',
        data_json: JSON.stringify(orderInfo),
        orderInfo_json: JSON.stringify(orderInfo),
      })
      uni.navigateTo({
        url: `/pages/asset/stock/car-stock/selector?${paramStr}`,
      })
      errorModalObject.visible = false
    }
  }
  const changeMemberFn = (data) => {
    editCurrentMemberModalRef.value.close()
    editLesseeMemberModalRef.value.open(orderInfo.value.id, data)
  }
  const errorModalObject = reactive({
    visible: false,
    okText: '去匹配',
    cancelText: '取消',
    showCancel: true,
    onConfirm: null,
    onCancel: null,
    loading: false,
    html: '',
  })
  const editLesseeMemberModalRef = ref()
  const editCurrentMemberModalRef = ref()
  const errorModalFn = () => {
    return new Promise(async (resolve, reject) => {
      // 生成电子合同判断逻辑优化
      let { result } = await checkContractData({ orderId: props.orderId, orderType: props.orderType == 2 ? 1 : 2 })
      let keys = Object.keys(result)
      if (keys.length) {
        let status = keys[0]
        switch (Number(status)) {
          // 门店信息为空
          case 9901:
            errorModalObject.html = `
              <div>
                <p style="text-align:center">当前订单<span style="color:red">无门店</span></p>
                <p>请前往<span class="modalText">PC端后台-业务>渠道管理>OTA渠道管理模块</span></p>
                <p>完成<span class="modalText">当前渠道订单门店的匹配，</span>再生成电子合同</p>
              </div>
            `
            errorModalObject.okText = '我已知晓'
            errorModalObject.showCancel = false
            errorModalObject.onConfirm = () => (errorModalObject.visible = false)
            break
          // 姓名或手机号格式不正确
          case 9902:
            let infoArr = result[keys[0]].split(' ')
            errorModalObject.okText = '去修改'
            errorModalObject.showCancel = true
            errorModalObject.html = `
              <div>
                <p>承租人信息 ${infoArr.filter((_, index) => index != 2).join(' ')}</p>
                <p>当前订单承租人的<span class="modalText">${infoArr.slice(-1).join()}</span>格式错误</p>
                <p>请先修改承租人<span class="modalText">${infoArr.slice(-1).join()}，</span>再生成电子合同</p>
              </div>
            `
            errorModalObject.onConfirm = () => {
              let permissionStr = props.orderType == 2 ? 'svmsapp:order:short-order.edit' : 'svmsapp:order:long-order.edit'
              if (usePermission(permissionStr)) {
                errorModalObject.visible = false
                editCurrentMemberModalRef.value.open(orderInfo.value)
                return
              }
              uni.showToast({
                title: '您没有订单修改权限',
                icon: 'none',
              })
            }
            break
          // 处于待排车状态的手动维护渠道订单和线下订单
          case 9903:
            errorModalObject.okText = '去排车'
            errorModalObject.cancelText = '继续生成'
            errorModalObject.html = `
              <div>
                <p style="text-align:center">当前订单<span style="color:red">未排车</span></p>
                <p>点击【去排车】先完成<span class="modalText">当前订单的排车，</span>再生成电子合同</p>
                <p>点击【继续生成】，合同生成后可通过【修改合同】完善车辆信息</p>
              </div>
            `
            errorModalObject.onConfirm = () => {
              let permissionStr = props.orderType == 2 ? 'svmsapp:order:short-order.platooncar' : 'svmsapp:order:long-order.platooncar'
              usePermission(permissionStr)
                ? platoonCarFn(orderInfo.value)
                : uni.showToast({
                    title: '您没有排车权限',
                    icon: 'none',
                  })
              errorModalObject.visible = false
            }
            errorModalObject.onCancel = () => resolve()
            break
          // 处于待排车状态的自动维护的渠道订单
          case 9904:
            errorModalObject.okText = '取消'
            errorModalObject.cancelText = '继续生成'
            errorModalObject.html = `
              <div>
                <p style="text-align:center">当前订单<span style="color:red">未排车</span></p>
                <p>可先在渠道平台完成订单的排车，再生成电子合同</p>
                <p>点击【继续生成】，合同生成后可通过【修改合同】完善车辆信息</p>
              </div>
            `
            errorModalObject.onConfirm = () => {
              errorModalObject.visible = false
              reject()
            }
            errorModalObject.onCancel = () => {
              errorModalObject.visible = false
              resolve()
            }
            break
          // 自动维护的且有渠道车辆有值的渠道订单到达待用车的状态后,订单上仍没有排车车辆
          case 9905:
            errorModalObject.okText = '取消'
            errorModalObject.cancelText = '继续生成'
            errorModalObject.html = `
              <div>
                <p style="text-align:center">当前订单<span style="color:red">无车辆</span></p>
                <p>可前往<span class="modalText">PC端后台-业务>渠道管理>OTA渠道管理模块，完成当前渠道订单车辆的匹配，</span>再生成电子合同</p>
                <p>点击【继续生成】，合同生成后可通过【修改合同】完善车辆信息</p>
              </div>
            `
            errorModalObject.onConfirm = () => {
              errorModalObject.visible = false
              reject()
            }
            errorModalObject.onCancel = () => {
              errorModalObject.visible = false
              resolve()
            }
            break
          // 自动维护的但是渠道车辆为空的渠道订单到达待用车状态后，订单上仍没有排车车辆
          case 9906:
            errorModalObject.okText = '修改车牌号'
            errorModalObject.cancelText = '继续生成'
            errorModalObject.html = `
              <div>
                <p style="text-align:center">当前订单<span style="color:red">无车辆</span></p>
                <p>点击【修改车牌号】先填写<span class="modalText">车牌号，</span>再生成电子合同</p>
                <p>点击【继续生成】，合同生成后可通过【修改合同】完善车辆信息</p>
              </div>
            `
            errorModalObject.onConfirm = () => {
              let permissionStr =
                props.orderType == 2 ? 'svmsapp:order:short-order.editCarLicenseNo' : 'svmsapp:order:long-order.editCarLicenseNo'
              usePermission(permissionStr)
                ? editCarLicenseNo(orderInfo.value)
                : uni.showToast({
                    title: '您没有修改车牌号的权限',
                    icon: 'none',
                  })
              errorModalObject.visible = false
            }
            errorModalObject.onCancel = () => {
              errorModalObject.visible = false
              resolve()
            }
            break
          // 承租人不存在系统会员中，获取不到会员信息
          case 9907:
            errorModalObject.okText = '确认'
            errorModalObject.showCancel = false
            errorModalObject.html = result[keys[0]]
            errorModalObject.onConfirm = () => (errorModalObject.visible = false)
            break
        }
        errorModalObject.visible = true
        return
      }
      resolve()
    })
  }
  // 手动生成电子合同
  // 点击新增合同传入的 record 实际上是 $event
  const showContract = async (record) => {
    await errorModalFn()
    if (record.id) {
      uni.navigateTo({
        url: `/pages/order/contract-content/contract-info?id=${props.orderId}&orderType=${props.orderType}&contractId=${
          record.id
        }&contractPayType=${props.contractPayType}&orderCode=${orderCode.value || ''}`,
      })
    } else {
      uni.navigateTo({
        url: `/pages/order/contract-content/contract-info?id=${props.orderId}&orderType=${props.orderType}&contractPayType=${
          props.contractPayType
        }&orderCode=${orderCode.value || ''}`,
      })
    }
  }
  const operates = ref([
    // 签署中 已撤回 已完成 已作废
    {
      label: '预览',
      permission: getPermission('contractPreview'),
      method: (record) => {
        toPreview(record)
      },
    },

    //  已完成
    {
      label: '作废',
      permission: getPermission('contractInitiateCancellation'),
      show: (record) => record.contractStatus == 3,
      method: (record) => {
        uni.showModal({
          title: '提示',
          content: '合同已完成签署，确认作废吗?',
          success: function (res) {
            if (res.confirm) {
              // 发起作废接口
              nullifyAPI({ id: record.id }).then((res) => {
                uni.showToast({
                  title: '操作成功',
                  icon: 'none',
                })
                resetRefresh()
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          },
        })
      },
    },
    // 签署中
    {
      label: '发送签署短信',
      permission: getPermission('message'),
      show: (record) => record.contractStatus == 2,
      method: (record) => {
        uni.showModal({
          title: '提示',
          content: '发送签署短信会产生短信费用，请确认是否发送？',
          success: function (res) {
            if (res.confirm) {
              sendLesseeSignMsgAPI({ id: record.id }).then(() => {
                uni.showToast({
                  title: '操作成功',
                  icon: 'none',
                })
                resetRefresh()
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          },
        })
      },
    },
    {
      label: '修改合同',
      permission: getPermission('contract.edit'),
      show: (record) => record.contractStatus == 2,
      method: (record) => {
        uni.navigateTo({
          url: `/pages/order/contract-content/edit-contract?id=${record.id}&orderType=${record.orderType}&contractType=${record.contractType}`,
        })
      },
    },
    // 签署中
    {
      label: '撤回',
      permission: getPermission('contractWithdraw'),
      show: (record) => record.contractStatus == 2,
      method: (record) => {
        uni.showModal({
          title: '提示',
          content: '合同撤回后，承租方短信失效，无法完成签署，确认撤回吗？',
          success: function (res) {
            if (res.confirm) {
              revokeAPI({ id: record.id }).then(() => {
                uni.showToast({
                  title: '操作成功',
                  icon: 'none',
                })
                resetRefresh()
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          },
        })
      },
    },
    {
      label: '下载',
      permission: getPermission('contract.download'),
      show: (record) => record.contractStatus == 3 || record.contractStatus == 8,
      method: (record) => {
        openPopup(record)
      },
    },
  ])

  const currenRecord = ref({})
  const openPopup = (record) => {
    currenRecord.value = record
    popupValue.value = true
  }
  const close = () => {
    popupValue.value = false
  }

  // 预览
  const toPreview = (record) => {
    downloadContractFileAPI({ id: record.id, contractFileType: 1 }).then((r) => {
      if (!r.result) {
        uni.showToast({
          title: '打开失败',
          icon: 'none',
        })
        return false
      }
      uni.downloadFile({
        url: r.result,
        success: function (res) {
          const filePath = res.tempFilePath
          uni.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log('打开文档成功')
              // 销毁文件
              record.payType == 1 && deleteContractFileAPI({ contractFilePath: r.result })
            },
          })
        },
      })
    })
  }

  // 下载
  const toDownload = (record) => {
    if (!isDownload.value) {
      isDownload.value = true
      downloadContractFileAPI({ id: record.id, contractFileType: 2 }).then((r) => {
        isDownload.value = false
        if (!r.result) {
          uni.showToast({
            title: '下载失败',
            icon: 'none',
          })
          return false
        }
        uni.saveImageToPhotosAlbum({
          filePath: r.result,
          success: function () {
            uni.showToast({
              title: '已保存至相册',
              icon: 'none',
            })
            close()
          },
          fail: function (fail) {
            uni.showToast({
              title: fail.errMsg.includes('Permission') ? '无相册访问权限，无法下载' : '下载失败',
              icon: 'none',
            })
            close()
          },
        })
      })
    }
  }
</script>

<style lang="scss" scoped>
  .red {
    color: red;
  }
  .errorModal {
    margin-bottom: 40rpx;
    :deep(.modalText) {
      color: #3491fa;
      font-weight: 700;
    }
  }
  .detail-container {
    padding: 24rpx;
  }
  .tag-person {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    view:nth-child(1) {
      max-width: 280rpx;
    }

    .person-flex-copy {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 16rpx;
      .tag {
        padding: 0 16rpx;
        height: 40rpx;
        line-height: 38rpx;
        border-radius: 347rpx;
        font-size: 24rpx;
      }
      .text-no {
        background: #fff7e8;
        color: #ff7d00;
      }
      .text-yes {
        background: #e8ffea;
        color: #00b42a;
      }
    }
  }
  .copys {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .image-icon {
      width: 28rpx;
      height: 28rpx;
      margin: 0 6rpx 0 24rpx;
    }
    .copy-text {
      color: #3072f6;
      font-size: 26rpx;
      font-weight: 400;
    }
  }

  :deep(.ve-cell-content) {
    flex-wrap: wrap;
  }
  .tips {
    position: relative;
    display: flex;
    align-items: baseline;
    width: 100%;
    background: #e8f3ff;
    font-weight: 400;
    font-size: 24rpx;
    color: #1e1e1e;
    line-height: 44rpx;
    padding: 24rpx 14rpx 24rpx 64rpx;
    .img {
      position: absolute;
      top: 30rpx;
      left: 24rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .add-popup {
    padding: 0 40rpx 96rpx 40rpx;
    .title {
      font-weight: 600;
      font-size: 36rpx;
      color: #191c27;
      line-height: 44rpx;
      text-align: center;
      padding: 32rpx 0 48rpx 0;
    }
  }
  :deep(.ve-popup-mask) {
    background-color: rgba(0, 0, 0, 0.3);
  }
</style>
